<%@ include file="/WEB-INF/jspf/tag-libraries.jspf"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>
<ttjhome:bundle basename="companies/companies" />
<ttjhome:resource basename="companies/companies" bundle="errorBundle" scope="request" />
<ttjhome:rewrite var="createURL" action="/companies/create.do?action=create" form="true" />
<ttjhome:rewrite var="editURL" action="/companies/edit.do?action=edit" form="true"/>
<ttjhome:rewrite var="viewJobsURL" action="/jobs.do?action=getJobs" form="false" />
<ttjhome:rewrite var="editJobsURL" action="/jobs/edit.do?action=edit" form="false" />
<ttjhome:rewrite var="createJobURL" action="/jobs.do?action=createJob" form="false" />
<c:set var="action" value="${companyForm.map.filter}"/>
<script type="text/javascript">

function saveCompany(){
	drawLoading();

	$("#companySaveForm").submit();
	
	function drawLoading() {
		$("#loadingBox").css({
			"height": $(window).height()+ 'px',
			"display": "inline"
		});
		

		$("#loadingDialog").css({
			"top": ($(window).scrollTop() + ($(window).height() / 2)) + 'px'
		});
	}
}

function constructJob(job){
	var editJobsURL= "${editJobsURL}"+"&jobID="+job.id;
	var s= "<tr>" +
				"<td><a href="+editJobsURL+" >"+job.name+"</a></td>" + 
				"<td>" + job.description + "</td>" + 
				"<td>" + job.tags+"</td>" + 
				"<td>" + job.filename + "</td>" +
				"</tr>"
	return s;
}

	$(function() {
		
		$("#create-job" )
			.button()
			.click(function() {
				//clear first 
				$("#uploadedjds").empty();
				$("#uploadedjdNames").empty();
				$("#jds").empty();
				$("#dialog-newjob" ).dialog( "open" );
			});
		
		$("#view-job" )
			.button()
			.click(function() {
				//show widgets
				$("#create-job").show();
				$("#jobs-contain").show();
				//get jobs 
				 var url = "${viewJobsURL}";
				<c:if test="${not empty companyForm.map.companyID}">
					url+="&companyId="+${companyForm.map.companyID};
				</c:if> 
				  $.getJSON(url, function(json){
						        if (json.result == 0) {
										$.each(json.data, function(id, job){
											$( "#jobs tbody" ).append( constructJob(job) ); 
									});
								}
								 else {
						            alert("error when getting jobs");
						        }
				});
			
			});		
			
		$("#dialog-newjob" ).dialog({
			autoOpen: false,
			height: 400,
			width: 550,
			modal: false,
			buttons: {
				"Create": function() {
						var name =$("#name").val();
						var description =$("#description").val();
						var file=$("#uploadedjds").val();
						var filename=$("#uploadedjdNames").val();
						 var url = "${createJobURL}";
						 url=url+"&name="+name+"&description="+description;
						 if(file!=""){
							 url=url+"&file="+file;
						 }
						 if(filename!=""){
							 url=url+"&filename="+filename
						 }
						 <c:if test="${not empty companyForm.map.companyID}">
								url+="&companyId="+${companyForm.map.companyID};
						 </c:if> 
						
						 $.getJSON(url, function(json){
						        if (json.result == 0) {
									     
													$( "#jobs tbody" ).append( constructJob(json.data) ); 
										
									}
									
						        
						        else {
						            alert("error when saving new job");
						        }
						    });
							$( this ).dialog( "close" );	
						},
				
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			}
		
		});
	});
$(document).ready(function() {
			<c:if test="${action==Constants.KEY_FILTER_EDIT}">
				$("#viewjobs").show();
			</c:if>

	  $('#file_upload').uploadify({
				'uploader'  : '../include/js/uploadify.swf',
				'script'    : 'upload',
				'cancelImg' : '../include/img/cancel.png',
				'folder'    : '/upload',
				'auto'      : true,
				//only allow one valid jd file
				onComplete: function (event, queueID, fileObj, response, data){
					var str="<a href="+response+">"+fileObj.name+"</a>";
					document.getElementById("jds").innerHTML =str;
				    $("#uploadedjds").val(response);
					$("#uploadedjdNames").val(fileObj.name);
				},
			});
})
</script>
<div class="toolBody">
		<div class="candidatesH2">
			<h2>
				<c:choose>
					<c:when test="${action==Constants.KEY_FILTER_EDIT}"><fmt:message key="edit.company.title"/> (${companyForm.map.companyName})</c:when>
					<c:otherwise><fmt:message key="create.company.title"/></c:otherwise>
				</c:choose>				
			</h2>
			<div class="clear"></div>
		</div>	
		<div id="error" class="couponErrMsg">
			<tiles:insert definition="errors-page-header">
				<tiles:put name="errorStyle" value="err-msg" />
				<tiles:put name="errorIcon" value="/include/img/error-sign-sm.gif" />
			</tiles:insert>
		</div>
		<c:set var="actionURL" value="${createURL}"/>
		<c:if test="${action==Constants.KEY_FILTER_EDIT}">
			<c:set var="actionURL" value="${editURL}"/>
		</c:if>
		<html:form method="post" action="${actionURL}" styleClass="candidateEditForm"  styleId="companySaveForm">
				<html:hidden property="companyID" styleId="companyID"/>
		<div class="clear5"></div>
			<div class="leftCol">
			<fmt:message key="company.name" var="companyName"/>
			<tf:input errorClass="err" name="companyName"/>
			<h3><label for="companyName" class="${err}">${companyName}</label> </h3>
			<div class="candidateEditLable">
				<html:text property="companyName"   maxlength="60"/>
			</div>
		</div>
		<div class="rightCol">
			<fmt:message key="company.poc" var="companyPOC"/>
			<tf:input errorClass="err" name="companyPOC"/>
			<h3><label for="companyPOC" class="${err}">${companyPOC}</label> </h3>
			<div class="candidateEditLable ">
				<html:text property="companyPoc"   maxlength="20"/>
			</div>
		</div> 
		<div class="clear5"></div>
		
		<div class="leftCol">
			<fmt:message key="company.phoneNumber" var="companyPhoneNumber"/>
			<tf:input errorClass="err" name="companyPhoneNumber"/>
			<h3><label for="companyPhoneNumber" class="${err}">${companyPhoneNumber}</label> </h3>
			<div class="candidateEditLable">
				<html:text property="companyPhoneNumber"   maxlength="20"/>
			</div>
		</div>
		
		<div class="rightCol">
			<fmt:message key="company.mailbox" var="companyMailBox"/>
			<tf:input errorClass="err" name="companyMailBox"/>
			<h3><label for="companyMailBox" class="${err}">${companyMailBox}</label> </h3>
			<div class="candidateEditLable">
				<html:text property="companyMailBox"   maxlength="20"/>
			</div>
		</div>
		
	
		<div class="clear5"></div>
		<div class="leftCol">
			<fmt:message key="company.address" var="companyAddress"/>
			<tf:input errorClass="err" name="companyAddress"/>
			<h3><label for="companyAddress" class="${err}">${companyAddress}</label> </h3>
			<div class="candidateEditLable">
				<html:text property="companyAddress"   maxlength="500"/>
			</div>
		</div>
		
		<div class="rightCol">
			<fmt:message key="company.description" var="companyDescription"/>
			<tf:input errorClass="err" name="companyDescription"/>
			<h3><label for="companyDescription" class="${err}">${companyDescription}</label> </h3>
			<div class="candidateEditLable">
				<html:textarea property="description"   />
			</div>
		</div>
		
		<div class="clear5"></div>
	
		<div class="candidateEditSave">
			<html:hidden property="filter"/>
		</div>
		<div class="candidateEditSave">
			<fmt:message key="save.company.button" var="saveCompanyButton"/>
			<input name="Save" type="button" value="${saveCompanyButton}" onclick="saveCompany();" />
			
		</div>
		<div id="loadingBox" class="pageMaskBox">
			<div class="pageMask">
				<!--[if lt IE 7]>
				<iframe class="maskIframe"></iframe>
				<![endif]-->
			</div>
			<div id="loadingDialog" class="loadingDialog">
				<p><img src="../include/img/loading.gif"/></p>
				<p><fmt:message key="loading.text"/></p>
			</div>
		</div>
		</html:form>
		
		
		
	<div id="dialog-newjob" title="Create new job">
		<form>
		<fieldset>
			<label for="name">Name</label>
			<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
			<label for="description">description</label>
			<input type="text" name="description" id="description" value="" class="text ui-widget-content ui-corner-all" />
			<label for="file_upload">JD</label>
			<input id="file_upload"  name="file_upload"  type="file"/>
			<div id="jds"/>
				
			</div>
			<input type="hidden" id="uploadedjds" value=""/>
			<input type="hidden" id="uploadedjdNames" value=""/>	
		</fieldset>
		</form>
	</div>
	<div id="viewjobs"  style="display:none">
			<button id="view-job" >View Jobs</button>
	</div><!-- End jobs -->
	<button id="create-job" style="float:right;display:none">Create</button>
	<div id="jobs-contain" class="ui-widget" style="display:none">
		<table id="jobs" class="ui-widget ui-widget-content">
			<thead>
				<tr class="ui-widget-header ">
					<th>Name</th>
					<th>Description</th>
					<th>Tags</th>
					<th>JD</th>
				</tr>
				
			</thead>
		<tbody>
		</tbody>
	</table>
	</div>
	
</div>